<template>
	<div class="main_div">
		<div class="info_div">
			<div>
				<table class="table_cls">
					<tr>
						<td>账号</td>
						<td><el-input v-model="form.username" placeholder="请输入账号"></el-input></td>
					</tr>
					<tr>
						<td>新密码</td>
						<td><el-input show-password v-model="form.password" placeholder="请输入新密码"></el-input></td>
					</tr>
					<tr>
						<td>验证码</td>
						<td style="text-align: left;">
							<el-input style="width: 90px;" v-model="form.code" placeholder="验证码"></el-input>
							<el-button style="margin-left: 10px;" type="info" @click="sendCode()">发送验证码</el-button>
						</td>
					</tr>
				</table>
			</div>
			<div style="margin: 10px;">
				<el-button type="primary" class="login_btn" @click="updatePassword">修改密码</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: "",
					password: "",
					code: ""
				}
			}
		},
		methods: {
			goPage(url) {
				this.$router.push(url);
			},
			//发送验证码
			sendCode(){
				this.$.ajax({
					type: "GET",
					url: "/email/sendCode",
					data: {
						username: this.form.username
					},
					success: (data) => {
						this.$message({
							message: "验证码已发送到" + data + "该邮箱",
							type: "success"
						})
					}
				});
			},
			//修改密码
			updatePassword(){
				this.$.ajax({
					type: "POST",
					url: "/user/updatePassword",
					data: this.form,
					success: (data) => {
						this.$message({
							message: "恭喜你，密码修改成功！",
							type: "success"
						});
						
						//跳转到登录页面
						this.$router.push("/");
					}
				});
			}
		},
		mounted(){
			//验证当前是否登录
			var user = this.$.getUser();
			if(user){
				//说明已经登录了
				this.$router.push("/Index");
			}
		}
	}
</script>

<style>
	.main_div {
		width: 100%;
		height: 100%;
		background-color: cadetblue;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.info_div {
		width: 400px;
		height: 300px;
		background-color: aliceblue;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}
	
	
	.table_cls tr td {
		padding: 10px 10px;
	}
	
	.login_btn {
		width: 200px;
	}
	
	.botton_div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		color: gray;
		font-weight: 900;
		margin-top: 10px;
	}
</style>